<template>
  <SysDialogVue
    :title="dialog.title"
    :width="dialog.width"
    :height="dialog.height"
    :visible="dialog.visible"
    @onClose="onClose"
    @onConfirm="confirm"
  >
    <template v-slot:content>
      <el-form
        :model="addModel"
        ref="addUserForm"
        :rules="rules"
        label-width="80px"
        size="mini"
      >
        <el-row>
          <el-col :span="12" :offset="0">
            <el-form-item prop="deptName" label="所属部门">
              <el-input @click="selectParent" v-model="addModel.deptName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item prop="loginName" label="姓名">
              <el-input v-model="addModel.loginName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" :offset="0">
            <el-form-item prop="mobile" label="电话">
              <el-input v-model="addModel.mobile"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="昵称">
              <el-input v-model="addModel.nickName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" :offset="0">
            <el-form-item label="邮箱">
              <el-input v-model="addModel.email"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item prop="username" label="登录名">
              <el-input v-model="addModel.username"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col v-if="addModel.type != '1'" :span="12" :offset="0">
            <el-form-item prop="password" label="密码">
              <el-input v-model="addModel.password"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item prop="sex" label="性别">
              <el-radio-group v-model="addModel.sex">
                <el-radio :label="'0'">男</el-radio>
                <el-radio :label="'1'">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
  </SysDialogVue>
  <!-- 选择上级部门的弹框 -->
  <parentVue ref="parentRef" @select="select"></parentVue>
</template>
<script setup lang="ts">
/**
 * 这个是组件的结构和样式
 * 首先需要引入组件的结构
 * 这里还有一个特殊的结构就是选择上级部门的弹框
 * 这个弹框可以在跟之前封装使用的选择上级的弹框几乎一样，可以选择复用
 * 因为这个选择上级组织最终的结果就是返回上级的id，通过注册的select事件
 * 拿到就可以
 */
import { ref, reactive } from 'vue'
// 引入选择上级部门的组件
import parentVue from '../department/parent.vue'
// 引入选择上级的使用方法，这个ts文件定义的一个事件，就是通过使用ref调用组件的show事件
import useSelectParent from '@/composables/department/useSelectParent'
// 引入组件的结构
import SysDialogVue from '@/components/SysDialog.vue'
// 引入组件的方法，就是组件自己的方法和属性
import useDialog from '@/hooks/useDialog'
// 引入组件的操作方法，这里还可以把其他组件的方法传递给下一个组件的操作方法
// 就是从其他文件结构出来的方法，再传递给下一个文件，就是函数的相互之间的传值
// 因为组件在进行操作的时候，肯定会操作自带的方法和属性
import useUserAddAndEdit from '@/composables/user/useUserAddAndEdit'
// 引入基本的类型，表单验证的绑定信息
import useBaseModel from '@/composables/user/useBaseModel'
// 声明事件，点击确认保存信息
const emit = defineEmits(['save'])
// 解构出基本的数据，绑定的规则和表单提交的数据结构，用于弹出框的表单
// 表单验证需要在点击确定的时候做表单验证功能
const { addModel, rules } = useBaseModel()
const { dialog, onClose, onShow } = useDialog()
// 把组件的方法传递给自定义的方法，联合使用
const { show, confirm, addUserForm ,select} = useUserAddAndEdit(
  dialog,
  onClose,
  onShow,
  emit,
  addModel
)
// 选择上级部门的属性和方法
const { parentRef, selectParent } = useSelectParent()
// 把方法暴露出去，让父组件可以使用，在父组件中使用子组件的时候，传递事件用
// 父组件的使用方法就是通过ref来触发子组件上的事件
defineExpose({
  show
})
</script>
<style scoped lang="scss"></style>
